<template>

    <el-form :inline="true" :model="formData" class="demo-form-inline">
          <enum enumName="WarehouseStatus" v-model="formData.status" ></enum>
          <el-form-item>
              <el-input v-model="formData.name" placeholder="请输入关键字" clearable />
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="id" width="150" />
        <el-table-column prop="name" label="Name" width="120" />
        <el-table-column prop="img" label="img" width="120">
          <template #default="scope">
            <img :src="scope.row.img[0]" width="50" height="50" />
          </template>
        </el-table-column>
        <el-table-column prop="statusX" label="Zip" width="120" />
        <el-table-column prop="lastUpdateBy" label="Zip" width="120"  :formatter="formatter"/>
        <el-table-column prop="lastUpdateTime" label="Zip" width="120" :formatter="formatter"/> 
        <el-table-column fixed="right" label="Operations" min-width="120">
          <template #default="scope">
            <el-button  type="primary" size="small" v-if="scope.row.status!=120" @click="edit(scope.row)">编辑</el-button>
            <el-button  type="primary" size="small" @click="handleClick(scope.row, 1)" v-if="scope.row.status==2">上架</el-button>
            <el-button  type="primary" size="small" @click="handleClick(scope.row, 120)" v-if="scope.row.status==2">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
 
    </template>
    
    <script lang="ts" setup>
    import { ref ,reactive,onMounted } from 'vue'
    import { warehouseApi } from '@/api';
    import { dayjs , ElMessageBox, ElMessage, rowContextKey} from 'element-plus'
    import Enum from '@/components/Enum.vue';
    import {useRouter} from 'vue-router'
    const router = useRouter()
    const tableData = ref([])
    const WarehouseStatus = ref("WarehouseStatus")
   
   const edit=(row: any) => {
    router.push({name: 'warehouse.edit',query: { id: row.id }})
    }

  
    const callWarehouseApi=()=>{
      let params={
        name:formData.name==""?undefined:formData.name,
        status:formData.status==0?undefined:formData.status
      }
  
      warehouseApi.select.call(params).then(res=>{
          tableData.value=res
          console.log(res)
      })
    }
   
    const formatter = (row: any, column: any, cellValue: any, index: number) => {
  
      if (column.property === 'lastUpdateTime') {
      return dayjs(cellValue).format('YY年MM月DD HH:mm')
      } else if (column.property === 'lastUpdateBy') {
      return cellValue + " 同志"
      }
      return cellValue
  }
  
    onMounted(() => {
      callWarehouseApi()
    
      })
   const handleClick = (row: any, newStatus: number) => {
      let title = ''
      switch (newStatus){
      case 1:
        title='确认上架'+row.name+'?'
        break
      case 120:
        title='确认删除'+row.name+'?'
        break
      }
      ElMessageBox.confirm(
          title,
          '警告',
          {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
              type: 'warning',
          }
      ).then(() => {
        callWarehouseStatusApi(row.id, newStatus)
      }).catch(() => {
  
      });
  
     }
    
  const callWarehouseStatusApi=(id:number, newStatus: number)=>{
    warehouseApi.update.call({id:id,status:newStatus}).then((res :any)=>{
        ElMessage({
          message: '操作成功',
          type: 'success',
        })
        callWarehouseApi()
      })
  }
    const formData = reactive({
      name: '',
      status:1
    })

    const onSubmit = () => {
      callWarehouseApi()
    }
    </script>